<template>
	<view class="userinfo">
		<view class="user-avatar">
			<image v-if="!avatar" class="user-avatar-img" src="@/static/images/avatar.png" mode="aspectFit"></image>
			<image v-else class="user-avatar-img" :src="avatar" mode="aspectFill"></image>
		</view>
		<view class="user-content">
			<view class="user-name" hover-class="btn-hover" @click="$emit('login')">
				<text class="user-name-text">{{ isLogin ? (nickname || '游客') : '获取授权' }}</text>
				<text class="user-tag" v-if="isLogin">{{ storeName }}{{ isSuper ? '管理员' : (postName || '') }}</text>
			</view>
			<template v-if="isLogin">
				<view class="user-phone" v-if="phone">{{ phone | entryMobile }}</view>
				<view class="user-phone" v-else @click="$emit('bindphone')">点击绑定手机号</view>
			</template>
			<view class="user-phone" v-else>点击登录 受享更多精彩信息</view>
		</view>
		<view class="user-btns">
			<view class="user-btn" hover-class="btn-hover" @click="$emit('userinfoclick')">
				<image class="user-icon" src="@/static/icons/edit5.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isLogin: Boolean,
			avatar: String,
			nickname: String,
			phone: String,
			storeName: String,
			postName: String,
			isSuper: Boolean,
		},
		data() {
			return {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userinfo {
		display: flex;
		align-items: center;
		padding: 10rpx 30rpx;
		.user-avatar {
			position: relative;
			width: 112rpx;
			height: 112rpx;
			background: #E8F1FA;
			box-sizing: border-box;
			border: 4rpx solid #FFFFFF;
			border-radius: 50%;
			box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.08);
			overflow: hidden;
			&-img {
				width: 100%;
				height: 100%;
			}
		}
		.user-content {
			flex: 1;
			margin-left: 20rpx;
			.user-name {
				display: flex;
				align-items: center;
				&-text {
					font-size: 36rpx;
					font-weight: normal;
					line-height: 44rpx;
					color: #0C1E45;
				}
				.user-tag {
					margin-left: 10rpx;
					border: 1px solid $u-primary;
					border-radius: 8rpx;
					font-size: 24rpx;
					line-height: 1;
					color: $u-primary;
					padding: 8rpx 10rpx;
				}
			}
			.user-phone {
				margin-top: 15rpx;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 1;
				color: $u-content-color;
			}
		}
		.user-btns {
			display: flex;
			align-items: center;
			gap: 30rpx;
			.user-btn {
				position: relative;
				width: 48rpx;
				height: 48rpx;
				.user-icon {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>